<script setup>
import { defineEmits } from 'vue'

const emit = defineEmits(['title'])
emit('title', '项目介绍')
</script>

<template>
  <div class="page">
    <el-container>
      <el-main>
        <el-card shadow="always">
          <div class="content">
            <h2>项目介绍</h2>
            <p>
              <strong>秋天商城</strong>
              是一个集商品展示、购物、支付等功能于一体的电商平台。旨在为用户提供便捷、高效的在线购物体验。项目采用
              Vue.js 框架和 Element Plus 组件库进行开发，具备以下特点：
            </p>
            <ul>
              <li>
                <strong>简洁美观的界面设计：</strong>
                提升用户体验，使用户能够轻松浏览和购买商品。
              </li>
              <li>
                <strong>丰富的功能模块：</strong>
                包括商品分类、搜索、购物车、订单管理等功能，满足多样化需求。
              </li>
              <li>
                <strong>良好的可扩展性：</strong>
                方便后续功能迭代和优化，适应业务发展需求。
              </li>
              <li>
                <strong>完善的数据管理和安全保障：</strong>
                保障用户数据的安全性和隐私保护。
              </li>
            </ul>
            <h3>技术栈</h3>
            <p>项目的技术栈如下：</p>
            <ul>
              <li>
                <strong>前端技术：</strong> Vue3 + Element Plus + Uniapp + uView
                Plus
              </li>
              <li><strong>后端技术：</strong> Spring Boot + MySQL + Redis</li>
            </ul>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.page {
  background-color: #f5f7fa;
}

.el-container {
  display: flex;
  justify-content: center;
}

.el-main {
  padding: 0;
}

.el-card {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.content {
  padding: 2rem;

  h2,
  h3 {
    color: #333;
    margin-bottom: 1rem;
  }

  p {
    color: #606266;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  ul {
    list-style-type: disc;
    padding-left: 2rem;
    margin-bottom: 2rem;
  }

  li {
    color: #606266;
    line-height: 1.6;
    margin-bottom: 0.5rem;
  }

  strong {
    color: #409eff;
  }
}
</style>
